import React, { useEffect, useState } from 'react'
import api from '@/api'
interface item {

}
export default function Comments(props: any) {
    // 1. 获取评论列表
    // 2. 发布评论
    const { id } = props;
    const [comments, setComments] = useState([])
    const [commentVal, setCommentVal] = useState('')
    const userDataStr = window.localStorage.getItem('userData')
    const userData = userDataStr ? JSON.parse(userDataStr) : {}
    useEffect(() => {
        getCommentListFun()
    }, [])
    // 获取评论列表
    const getCommentListFun = () => {
        // 获取评论列表
        api.getComments({ blog_id: id }).then(res => {
            if (res.success) {
                setComments(() => {
                    // 把一级的数据 改为有嵌套关系的数据
                    const newList = res.data.filter((item: any) => item.parent_id === 0)
                    newList.forEach((item: any) => {
                        res.data.forEach((item2: any) => {
                            if (item2.parent_id === item.id) {
                                if (item.children) {
                                    item.children.push(item2)
                                } else {
                                    item.children = [item2]
                                }
                            }
                        })
                    })
                    return newList;
                })
            }
        })
    }
    // 评论
    const comment = (val: string, parent_id = 0) => {
        api.comment({
            "content": val,
            "author": userData.nickname,
            "user_id": userData.id,
            "blog_id": id,
            parent_id
        }).then((res: any) => {
            if (res.success) {
                getCommentListFun() // 评论成功 重新获取评论列表
            }
        })
    }
    return (
        <div>
            <input type="text" value={commentVal} onChange={({ target: { value } }) => {
                setCommentVal(value)
            }} />
            <button onClick={() => { comment(commentVal) }}>评论</button>
            {/* 遍历一级 */}
            {comments.map((item: any) => {
                return <div className="comment_list">
                    <h3 className="comment_author">
                        {item.author}:
                    </h3>
                    <div className="comment_detail">
                        {item.content} <ReplyComment comment={comment} id={item.id} />
                        {/* 遍历回复 */}
                        {item.children ? item.children.map((item2: any) => {
                            return <div className="child_comment_list" style={{ paddingLeft: '50px' }}>
                                <h3 className="comment_author">
                                    {item2.author} 回复{item.author}:
                                </h3>
                                <div className="comment_detail">
                                    {item2.content}<ReplyComment comment={comment} id={item.id} />
                                </div>
                            </div>
                        }) : <></>}
                    </div>
                </div>
            })}
        </div>
    )
}
// 回复组件
function ReplyComment(props: any) {
    const { comment, id } = props;
    const [val, setVal] = useState('')
    const [isOpen, setIsOpen] = useState(false)
    return <>
        {!isOpen ?
            <button onClick={() => { setIsOpen(true) }}>回复</button> :
            <div>
                <input type="text" value={val} onChange={({ target: { value } }) => {
                    setVal(value)
                }} />
                <button
                    onClick={() => {
                        comment(val, id) // 调用评论接口
                        setIsOpen(false) // 关闭
                    }}
                >回复</button>
            </div>
        }
    </>
}
